<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="box">
            <div id="text-overflow">
                <h2>Web design</h2>
            
                <p>以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。</p>
                <p>div 使用 &quot;text-overflow:ellipsis&quot;:</p>

                <div class="ellipsis">This is some long text that will not fit in the box</div>
                <p>div 使用 &quot;text-overflow:clip&quot;:</p>
                <div class="clip">This is some long text that will not fit in the box</div>
            </div>
            <div id="transform">
                <h2>2D变换</h2>
                <p>使用transform进行2D变换</p>
            </div>
        </div>
        <div id="transition">
            <div>web design</div>
        </div>
    </body>
</html>